<template>
  <div class="main" v-if="Object.keys(info).length != 0">
    <div class="back">
      <div @click="$router.go(-1)">
          <i class="el-icon-back"></i>

          <span>返回</span>
          
        </div>
        <span style="color:rgb(230,230,230)">|</span>
        <span class="title">消息阅读</span>
    </div>
      <div class="header">
        
        <div class="form">
          <span style="font-size:14px">
            来自: {{info.true_name}}
          </span>
          <span style="font-size:13px">  
            消息类别：{{info.type}}
          </span>
        </div>
        <div style="font-size:13px">
            {{info.add_time}}
        </div>
      </div>
      <div class="body" >
        <div v-html="info.content">

        </div>
        <div v-if="info.bind_data != null">
          <span >附件：<a v-for="(v,item) in info.bind_data" :key="item" :href="'/api/bpm/message/download?id=' + v.id + '&&name=' + v.name">{{v.name}} </a> </span>
        </div>
         <!-- {{info.content}} -->
      </div>
  </div>
</template>

<script>
export default {
  props:{
        infoData:Object,
    },
  data(){
    return {
      info:{}
    }
  },
  mounted(){
    console.log(2)
    this.loading()
    setTimeout(()=>{
          // console.log(this.infoData)
          this.load()
      },1000)
    //  this.load()
    // console.log(this.$route.query.id)
  },
  methods:{
      load(){
        // console.log(this.info)
        $.get(this.infoData.viewMsg,{"id":this.$route.query.id},Response => {
            if(Response.success){
                this.info = Response.data;
                if(Response.data.bind_data != null && Response.data.bind_data.length !=0){
                    this.info.bind_data = Response.data.bind_data
                }else{
                  this.info.bind_data = null
                }
                
                // console.log(this.info.bind_data)
            }else{
                this.$message.error(Response.errMessage);
            }
            this.loading(false)
        })
      },
      loading(bool = true) {
                
            const loading = this.$loading({
            lock: true,
            text: '',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0)'
            });
            if(!bool){
                loading.close();
            }
        }
  }

}
</script>

<style lang="less" scoped>
  .main{
    height:100vh;
    width: 100%;
    background:rgba(240,240,240,0.5);
    padding:10px;
    flex-direction: column;
    .back{
      height:50px;
       background:#fff;
       display: flex;
       align-items: center;
       i{
        margin:0 5px;
        font-size:16px;
       }
       div{
         margin:0 10px;
         cursor: pointer;
       }
       span{
         font-size:16px;
       }
       .title{
         margin:0 10px
       }
    }
    .header{
      padding:10px;
      // width:100%;
      height:50px;
       background:#fff;
      border-radius:15px;
      display: flex;
      margin-top:10px;
      justify-content: space-between;
      .form{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .body{
      margin-top:10px;
      padding:10px;
      background:#fff;
      border-radius:15px;
      height: 100%;
    }
  }
</style>